<template>
    <card-box :articleId='articleId' :isAlreadySubmission='isAlreadySubmission' :index='index' :total='total'
        :currentQuestion='currentQuestion' @next='next' @restart='restart' @submit='submit'>
        <template v-slot:question>
            <view class="question-box c-flex_row">
                <view class="question-item c-flex_column" v-for='(item, index) in questions' :key="index"
                    @click="tapItem(item, index)">
                    <view class="title">
                        {{item.mark}}. {{item.keyWord}}
                    </view>
                    <view class="value" :class="{'empty-value': !item.result}">
                        <view class="result" :class="{'empty-result': !item.result}">
                            {{item.result ? item.result.definition : "单击选择释义"}}
                        </view>
                    </view>
                </view>
            </view>
            <line-link-choice ref='choice' :choices='results' @confirm='choiceResult'></line-link-choice>
        </template>
    </card-box>
</template>

<script>
    import TestCardMixin from "../mixins/test-card-mixin.js";
    import CardBox from "./card-box.vue";
    import CardResult from "./card-result.vue"
    import LineLinkChoice from "./line-link-choice.vue"
    import {
        submitLineLinkAnswer
    } from "../../../services/index.js"
    export default {
        components: {
            CardBox,
            CardResult,
            LineLinkChoice
        },
        mixins: [TestCardMixin],
        data: function() {
            return {
                isAlreadySubmission: false,
                questions: [],
                results: [],
                score: 0,
                isCorrect: false
            }
        },
        watch: {
            currentQuestion: {
                handler: function(n) {
                    if (n) {
                        this.questions = n.selection;
                        this.results = this.shuffleArray(n.selection);
                    } else {
                        this.questions = [];
                        this.results = [];
                    }
                },
                immediate: true
            }
        },
        methods: {
            choiceResult(e) {
                let resultItem = e.item;
                let resultIndex = e.index;
                let questionIndex = e.questionIndex;
                this.questions.forEach((item, index) => {
                    if (item.result && item.result.mark == resultItem.mark) {
                        item.result = null;
                    }
                })
                this.questions[questionIndex].result = resultItem;
                this.$forceUpdate();
            },
            tapItem(item, index) {
                if (this.$refs.choice) {
                    this.$refs.choice.showChoicePop(true, item, index);
                }
            },
            // Fisher-Yates shuffle 算法 打乱排序
            shuffleArray: function(array) {
                let result = [...array]
                for (let i = result.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1)); // 生成一个介于 [0, i] 之间的随机索引
                    [result[i], result[j]] = [result[j], result[i]]; // 交换当前元素与随机选取的元素位置
                }
                return result;
            },
            next: function() {
                this.$emit("next", {
                    finish: this.finish
                })
            },
            submit: function() {
                let result = this.questions.map(item => {
                    return item.result ? item.result.mark : null
                }).filter(item => {
                    return item;
                })
                if (result.length == this.questions.length) {
                    uni.showLoading({
                        title: "提交中",
                    })
                    submitLineLinkAnswer(this.articleId, result, this.currentQuestion.id).then(res => {
                        this.score = res.score;
                        this.isCorrect = res.isCorrect;
                        this.isAlreadySubmission = true;
                    }).finally(() => {
                        uni.hideLoading()
                    })
                } else {
                    uni.showToast({
                        title: "请完成答题",
                        icon: 'none'
                    })
                }
            },
            restart: function() {
                this.score = 0;
                this.isCorrect = 0;
                this.isAlreadySubmission = false;
                this.questions.forEach(item => {
                    item.result = null;
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .question-box {
        flex-wrap: wrap;
        margin-left: 10rpx;

        .question-item {
            margin-right: 10rpx;
            margin-bottom: 15rpx;
            padding: 15rpx;
            width: calc(50% - 40rpx);
            background: #fff;
            border-radius: 10rpx;

            .title {
                font-size: 36rpx;
                font-weight: 700;
                color: #333;
                margin-bottom: 15rpx;
            }

            .value {
                height: 300rpx;
                padding: 15rpx;
                justify-content: center;
                border-radius: 10rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .result {
                    text-align: left;
                    color: #333;
                    font-size: 30rpx;
                    word-wrap: break-word;
                    word-break: break-all;
                    white-space: normal;
                }

                .empty-result {
                    color: #999;
                }
            }

            .empty-value {
                border: 2rpx dashed #999;
                align-items: center;
                justify-content: center;
            }
        }
    }
</style>